<template>
    <div class="order-shipment-list-item">
        <white-space/>
        <van-cell>
            <template #icon>
                <van-image class="order-shipment-list-item-image" :height="80" :width="80" :radius="6"
                           :src="firstImageUrl"/>
            </template>
            <template #title>
                <span class="order-shipment-list-item-status">已发货</span>
            </template>
            <template #label>
                <div class="order-shipment-list-item-label-line">承运来源：{{trackingCarrier}}</div>
                <div class="order-shipment-list-item-label-line">运单编号：{{trackingNumber}}</div>
            </template>
        </van-cell>
        <white-space/>
        <tracking-timeline :carrier-code="shipment.shippingProvider" :tracking-number="shipment.trackingNumber" v-if="tracked"/>
        <van-cell center title="暂无配送信息" size="large" title-class="order-shipment-list-item-no-tracking" v-else/>
        <white-space/>
    </div>
</template>

<script>
  import * as _ from "lodash"
  import { order } from "@mall/api-services"
  import TrackingTimeline from "@/components/shipping/TrackingTimeline"
  import WhiteSpace from "@/components/WhiteSpace"
  import { Cell, Image } from "vant"

  export default {
    name: "OrderShipmentListItem",
    components: {
      WhiteSpace,
      TrackingTimeline,
      [Cell.name]: Cell,
      [Image.name]: Image,
    },
    props: {
      shipment: {
        type: order.Shipment,
        default: () => new order.Shipment(),
      },
    },

    computed: {
      tracked() {
        const { trackingNumber } = this.shipment
        return !_.isEmpty(trackingNumber)
      },
      firstImageUrl() {
        const { shipment } = this
        if (_.isUndefined(shipment)) {
          return ""
        }
        const { imageUrls } = shipment
        return _.isEmpty(imageUrls) ? "" : _.first(imageUrls)
      },
      trackingCarrier() {
        const { trackingCarrier } = this.shipment
        return _.isEmpty(trackingCarrier) ? "暂无" : trackingCarrier
      },
      trackingNumber() {
        const { trackingNumber } = this.shipment
        return _.isEmpty(trackingNumber) ? "暂无" : trackingNumber
      },
    },
    methods: {},
  }
</script>

<style lang="scss" scoped>
    @import "../../styles/variables";

    .order-shipment-list-item {
        .order-shipment-list-item-image {
            box-shadow: 0 8px 12px #ebedf0;
            margin-right: 9px;
        }

        .order-shipment-list-item-status {
            color: $orange-dark;
            font-weight: 700;
            font-size: 15px;
        }

        .order-shipment-list-item-label-line {
            margin-bottom: 4px;
        }

        .order-shipment-list-item-no-tracking {
            text-align: center;
        }
    }
</style>
